<template>
  <view>
    <u-sticky bg-color="#fff">
      <u-tabs :list="tabList" line-width="30" line-height="7" :line-color="`url(`+lineBg+`) 100% 100%`" :active-style="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }" :inactive-style="{
          color: '#606266',
          transform: 'scale(1)'
        }" item-style="height: 44px;width: 28%;" @click="switchTab" />
    </u-sticky>
    <view class="coupons">
      <view v-for="(item, index) in tableData" :key="index" class="item" @tap="toCouponDetail(item)">
        <image mode="widthFix" src="https://mm.wentsoft.com/images/coupon_bg.png" />
        <view class="coupon-box">
          <view class="title-box">
            <view class="title">
              {{ item.purposeName }}
            </view>
            <view class="icon-box price">
              <text style="font-size: 40rpx;">￥</text>
              <text :style="'font-size: '+item.fontSize+'rpx;'">{{ item.redeemMoney }}</text>
            </view>
          </view>
          <view class="content-box">
            <text class="name">{{ item.name }}</text>
            <text class="rule">{{ item.ruleVo }}</text>
            <text>{{ item.startTime }}~{{ item.endTime }}</text>
          </view>
          <view class="btn-box">
            <view>
              <u-line-progress :percentage="item.saledPercent<50 ? 50 : item.saledPercent">
                <text class="u-percentage-slot">{{ item.saledPercentVo }}</text>
              </u-line-progress>
            </view>
            <u-button size="mini" shape="circle" hair-line="false" :disabled="item.leftNum===0">{{ item.btnVo }}</u-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 无商品显示 -->
    <view v-if="tableData.length===0" class="empty">
      <view class="img">
        <image src="https://mm.wentsoft.com/images/empty-img/coupon-empty.png" />
      </view>
      <view class="text">没有找到对应卡券，看看别的吧</view>
    </view>
    <!-- 没有更多 --><!-- 没有更多 -->
    <u-loadmore v-else :status="loadMoreStatus" color="#999" margin-top="40" height="20" line-color="#999" dashed />

  </view>
</template>

<script>
import { pointCouponRedeemPage, pointCouponReceivePage, pointCouponPayPage } from '@/api/api1'
export default {
  props: {},
  data() {
    return {
      tabList: [], // 券分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      searchTableQuery: {
        size: 10,
        current: 1
      },
      searchTableData: {
        records: [],
        total: 0, // 总数
        pages: 0 // 总页数
      },
      tableData: [], // 表单数据
      loadMoreStatus: 'loadmore',
      lineBg: ''
    }
  },
  computed: {},
  created() {
    this.getSection()
  },
  methods: {
    refresh() {
      this.searchTableQuery.current = 1
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.tableData = []
      this.loadMoreStatus = 'loadmore'
      this.getSearchList()
    },
    toCouponDetail(item) {
      if (item.leftNum === 0) return
      if (!this.$store.getters.hasLoginAndHasMallInfo) {
        return uni.$u.route('/pages/users/login/index')
      }
      uni.$u.route('/pages/coupon/couponDetail/couponDetail', {
        coupon: JSON.stringify(item)
      })
    },
    /**
     * 绑定触底事件
     */
    pageing() {
      if (this.searchTableQuery.current < this.searchTableData.pages) {
        this.searchTableQuery.current = this.searchTableQuery.current + 1
        this.getSearchList()
      } else {
        this.loadMoreStatus = 'nomore'
      }
    },
    /**
     * 获取平台分类
     */
    getSection() {
      this.tabList = [{
        name: '购买卡券'
      }, {
        name: '领取卡券'
      }, {
        name: '兑换卡券'
      }]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
    },
    /**
     * 获取卡券列表
     */
    getSearchList() {
      const that = this
      that.loadMoreStatus = 'loading'
      if (that.currentTab === 2) {
        pointCouponReceivePage(that.searchTableQuery).then(res => {
          that.handle('领', res)
        })
      } else if (that.currentTab === 3) {
        pointCouponRedeemPage(that.searchTableQuery).then(res => {
          that.handle('兑换', res)
        })
      } else if (that.currentTab === 1) {
        pointCouponPayPage(that.searchTableQuery).then(res => {
          that.handle('买', res)
        })
      }
    },
    handle(desc, res) {
      this.searchTableData = {
        records: res.data.records,
        total: res.data.total, // 总数
        pages: res.data.pages // 总页数
      }
      const resList = res.data.records.map(data => {
        const cp = data
        if (String(data.redeemMoney).length > 2) {
          cp.fontSize = 54
        } else if (String(data.redeemMoney).length > 4) {
          cp.fontSize = 22
        } else {
          cp.fontSize = 76
        }

        cp.saledPercent = 100 - cp.leftPercent
        if (data.purpose === 1) {
          // 买券
          cp.ruleVo = cp.salePrice + '元兑换(' + cp.rule + ')'
          cp.saledPercentVo = '已售' + cp.saledPercent + '%'
          cp.btnVo = cp.salePrice + '元购'
        } else if (data.purpose === 2) {
          // 领券
          cp.ruleVo = cp.rule
          cp.saledPercentVo = '已领' + cp.saledPercent + '%'
          cp.btnVo = '领取'
        } else if (data.purpose === 3) {
          // 兑换券
          cp.ruleVo = cp.salePrice + '积分兑换(' + cp.rule + ')'
          cp.saledPercentVo = '已兑' + cp.saledPercent + '%'
          cp.btnVo = cp.salePrice + '积分兑'
        }
        return cp
      })
      console.info('可' + desc + '券列表数据：', resList)
      this.tableData = this.tableData.concat(resList)
      if (res.data.current === res.data.pages || res.data.records.length === 0) {
        this.loadMoreStatus = 'nomore'
      }
    },
    /**
    * 切换分类
    */
    switchTab(e) {
      if (this.currentTab === e.id) return

      this.currentTab = e.id
      this.searchTableQuery.current = 1
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.tableData = []
      this.loadMoreStatus = 'loadmore'
      this.getSearchList()
    }
  }
}
</script>
<style lang="scss" scoped>
/* 横排券列表 */
.empty {
  padding: 0 0;
}
.coupons {
  @include flex-center(column);
  gap: 18rpx;
  .item {
    width: 100%;
    height: 214rpx;
    image {
      position: absolute;
      height: 214rpx;
      z-index: -1;
    }
    .coupon-box {
      @include flex-space-between;
      align-items: stretch;
      height: 214rpx;
      padding: 0 12rpx;
      .title-box {
        padding: 0 10rpx;
        .title {
          position: relative;
          top: 22rpx;
          width: 60rpx;
          height: 32rpx;
          text-align: center;
          font-size: 22rpx;
          color: #fff;
        }
        .icon-box {
          position: relative;
          top: 27%;
        }
      }
      .content-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: rgba(0, 0, 0, 1);
        text {
          font-size: 24rpx;
        }
        .name {
          font-size: 32rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .rule {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .btn-box {
        padding: 10rpx 16rpx 10rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 175rpx;
        .u-percentage-slot {
          color: #fff;
          font-size: 10px;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>
